package myJs.download

import myJs.api.Api
import myJs.cps.BootstrapTableCp.Column
import myJs.myPkg.layer
import myJs.tool.Pojo.TextSearch
import myJs.tool.Tool
import slinky.core.FunctionalComponent
import slinky.core.annotations.react
import slinky.core.facade.Hooks.{useEffect, useState}
import typings.csstype.csstypeStrings
import upickle.default.{reader, writeJs}

import scala.collection.immutable.SeqMap

//import myJs.MainCp
//import myJs.api.Api
//import myJs.cps.BootstrapTableCp.Column
import myJs.cps._
//import myJs.myPkg.ReactRouterDOM
//import myJs.myPkg.bootstrap.jquery.ScrollspyOptions
//import myJs.myPkg.jquery.$
//import myJs.tool.Pojo.{NumericSearch, TextSearch}
//import org.scalajs.dom.document
//import slinky.core.annotations.react
//import slinky.core.facade.Hooks._
//import slinky.core.{FunctionalComponent, TagElement}
//import slinky.web.SyntheticMouseEvent
import slinky.web.html._
//import typings.csstype.csstypeStrings
//import upickle.default.{reader, writeJs}
//
//import scala.collection.immutable.SeqMap
////import myJs.myPkg.i18n.ReactI18next
import myJs.Implicits._
import org.scalajs.macrotaskexecutor.MacrotaskExecutor.Implicits._

/**
 * Created by yz on 21/1/2022
 */
@react object MTableCp {

  type Props = Unit

  val component = FunctionalComponent[Props] { props =>

    val (datas, setDatas) = useState(List.empty[ujson.Obj])
    val (columns, setColumns) = useState(List.empty[Column])

    object FTool {

      def getTableRs = {
        val options = Tool.layerOptions.copy(shade = List("0.1", "#fff"))
        val index = layer.load(0, options)
        Api.getFileData("Download/Mouse Bulk/Mouse_bulk_tissue.xlsx").map { response =>
          layer.close(index)
          response
        }
      }

      def refreshTableB = () => {
        getTableRs.map { response =>
          val curDatas = response.array
          val map = response.map
          val basicColumns = map.map { case (k, v) =>
            val searchKind = v match {
              case _ => TextSearch
            }
            val title = v match {
              case _ => v
            }
            val fmt = FTool.tbFmt(v)
            val comVF = FTool.comVFmt(v)
            val optionMap = searchKind match {
              case _ => SeqMap[String, String]()
            }
            Column(field = k, title = title, operable = false, searchKind = searchKind, formatter = fmt, comVF = comVF,
              optionMap = optionMap)
          }.toList
          setColumns(basicColumns)
          val datas = curDatas.map(x => writeJs(x).transform(reader[ujson.Obj]))
          setDatas(datas)
        }
      }

      def tbFmt(title: String) = (v: ujson.Value, row: ujson.Obj) => {
        title match {
          case "Expression Profile"=>
            val url = s"${Api.apiUrl}/gepLiver/tool/downloadFile"
            a(href := s"${url}?fileName=Download/Mouse Bulk/expr/${v.myStr}", v.myStr)()
          case "Metadata" =>
            val url = s"${Api.apiUrl}/gepLiver/tool/downloadFile"
            a(href := s"${url}?fileName=Download/Mouse Bulk/meta/${v.myStr}", v.myStr)()
          case _ => span(v.myStr)()
        }
      }

      def comVFmt(fileTitle: String) = (v: ujson.Value, row: ujson.Obj) => {
        fileTitle match {
          case "Freq" =>
            (v.str.toDouble * 100).toFixed(1)
          case _ => v.myStr

        }

      }
    }

    useEffect(() => {
      FTool.refreshTableB()
    }, List()
    )

    def trStyle = (curI: Int) => {

      curI match {
        case 0 => Style(backgroundColor = "#EEEEEE", fontWeight = csstypeStrings.bold)
        case _ => Style()
      }

    }

    BootstrapTableCp(columns = columns, datas = datas, pageList = List(5, 10, 25, 50), pageSize = 5,
      selectColumnEnabled = false, operable = false, thStyle = Style(justifyContent = csstypeStrings.center),
      tdStyle = Style(textAlign = csstypeStrings.center), trStyle = trStyle
    )

  }

}
